<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div::after {
            content: "";
            width: 30px;
            height: 30px;
            background-color: #000;
            display: inline-block;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div style="width: 100px;height: 100px;background-color: burlywood;"></div>
    <script>
        //               脚本化css
        // 读写元素css属性(改变行间样式)
        //   dom.style.prop
        //      可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css
        //      eg:float->cssFloat
        //      符合属性必须拆解，组合单词变成小驼峰式写法
        //      写入的值必须是字符串格式
        // var div = document.getElementsByTagName('div')[0];
        // div.style.backgroundColor = 'red';
        // div.style.borderRadius = '10px';

        // 查询计算样式
        //    window.getComputedStyle(ele,null);*null可以获取伪元素的样式表
        // console.log(window.getComputedStyle(div, 'after').width);
        //    计算样式只读
        //    返回的计算样式的值都是绝对值,都是经过计算的,没有相对单位
        //    IE8及IE8以下不兼容
        // console.log(window.getComputedStyle(div, null));//获取当前元素所展示的一切css展示值
        // 查询样式
        //    ele.currentStyle
        //    计算样式只读
        //    返回的计算样式的值不是经过转换的绝对值
        //    IE独有的属性
        // div.className = 'xxx';//可以加class
        // 封装兼容性方法getStyle(elem,prop);
        // function getStyle(elem, prop) {
        //     if (window.getComputedStyle) {
        //         return window.getComputedStyle(elem, null)[prop];
        //     } else {
        //         return elem.currentStyle[prop];
        //     }
        // }
    </script>
</body>

</html>